<template>
  <div style="padding: 40px 40px 0 0">
    <Button color="primary" @click="showFormDialog" v-margin="10"
      >添加轮播图</Button
    >
    <Table
      :datas="tableList"
      :stripe="true"
      :height="550"
      :border="true"
      :loading="tableLoading"
    >
      <TableItem title="ID" sort="auto" align="center" prop="id"></TableItem>
      <TableItem title="封面" align="center">
        <template slot-scope="{ data }">
          <img :src="data.img_src" style="width: 320px; height: 120px" />
        </template>
      </TableItem>
      <TableItem title="网址链接" align="center" prop="web_src"> </TableItem>
      <TableItem title="小程序地址" align="center" prop="wxchat_path">
      </TableItem>
      <TableItem title="操作" align="center" :width="180" fixed="right">
        <template slot-scope="{ data }">
          <i
            v-tooltip
            placement="right"
            content="修改"
            class="h-icon-edit h-btn h-btn-s h-btn-green"
            @click="editCaousel(data.id)"
          ></i>
          <i
            v-tooltip
            placement="right"
            content="删除"
            class="h-icon-trash h-btn h-btn-s h-btn-red"
            @click="deleteCaousel(data.id)"
          ></i>
        </template>
      </TableItem>
      <div slot="empty">暂时无数据</div>
    </Table>
    <!-- 图片选择 -->
    <Modal v-model="ImageChooseDialog" :hasCloseIcon="true">
      <div style="width: 700px; max-width: 730px; min-width: 700px">
        <ImageCheck :isShowCheckBtn="true" @choose="chooseImg" />
      </div>
    </Modal>
    <!-- 添加表单 -->
    <Modal v-model="FormDialog">
      <div style="width: 700px; max-width: 730px; min-width: 700px">
        <div v-padding="10" class="h-modal-header text-right">
          <Button
            :icon-circle="true"
            @click="closeFormDialog"
            icon=" h-icon-close"
            color="primary"
          ></Button>
        </div>
        <Form
          ref="form"
          :validOnChange="true"
          labelPosition="left"
          :labelWidth="110"
          :rules="validationRules"
          :model="form"
        >
          <FormItem label="图片地址" prop="img_src">
            <input type="text" v-model="form.img_src" v-width="400" disabled />
            <Button
              color="primary"
              style="margin-left: 20px"
              @click="showImageDialog"
              >添加图片</Button
            >
          </FormItem>

          <FormItem label="网址链接" prop="web_src">
            <input type="text" v-model="form.web_src" v-width="400" />
          </FormItem>
          <FormItem label="小程序地址" prop="wxchat_path">
            <input type="text" v-model="form.wxchat_path" v-width="400" />
          </FormItem>
          <FormItem>
            <Button color="primary" v-show="!isUpdate" @click="submit"
              >增加</Button
            >
            <Button color="primary" v-show="isUpdate" @click="update"
              >更新</Button
            >
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>
<script>
import ImageCheck from "@/components/ImageCheck/index.vue";
export default {
  name: "setCarousel",
  components: { ImageCheck },
  data() {
    return {
      form: {
        img_src: "",
        web_src: "",
        wxchat_path: "",
      },
      validationRules: { required: ["img_src"], url: ["web_src"] },
      tableList: [],
      tableLoading: true,
      ImageChooseDialog: false,
      FormDialog: false,
      isUpdate: false,
      updateID: null, //本来是想直接和上面的isUpdate合并的。但是想了下 。个做个的吧
    };
  },
  methods: {
    showFormDialog() {
      this.FormDialog = true;
    },
    showImageDialog() {
      this.ImageChooseDialog = true;
    },
    chooseImg(e) {
      this.form.img_src = e.src;
    },
    closeFormDialog() {
      this.resetForm();
      this.FormDialog = false;
      this.isUpdate = false;
      this.updateID = null;
    },
    resetForm() {
      this.form.img_src = "";
      this.form.web_src = "";
      this.form.wxchat_path = "";
    },
    editCaousel(id) {
      this.isUpdate = true;
      this.updateID = id;
      this.getOne(id);
      this.showFormDialog();
    },
    async submit() {
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        let res = await this.$post("/api/carousel/create", {
          img_src: this.form.img_src,
          web_src: this.form.web_src,
          wxchat_path: this.form.wxchat_path,
        });
        if (res && res.code === 200) {
          this.$Message.success("添加成功");
          this.getCarousel();
        } else {
          this.$Message.error(res.message);
        }
        this.resetForm();
        this.ImageChooseDialog = false;
        this.FormDialog = false;
      }
    },
    async update() {
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        let res = await this.$post(`/api/carousel/update/${this.updateID}`, {
          img_src: this.form.img_src,
          web_src: this.form.web_src,
          wxchat_path: this.form.wxchat_path,
        });
        if (res && res.code === 200) {
          this.$Message.success("更新成功");
          this.resetForm();
          this.closeFormDialog();
        } else {
          this.resetForm();
          this.$Message.error(res.message);
        }
      }
    },
    async deleteCaousel(id) {
      let res = await this.$post(`/api/carousel/delete/${id}`);
      if (res && res.code === 200) {
        this.getCarousel();
        this.$Message.success("删除成功");
      } else {
        this.$Message.error(res.message);
      }
    },
    async getOne(id) {
      let res = await this.$post(`/api/carousel/getOne/${id}`);
      if (res && res.code === 200) {
        this.form.img_src = res.data[0].img_src;
        this.form.wxchat_path = res.data[0].wxchat_path;
        this.form.web_src = res.data[0].web_src;
      } else {
        this.$Message.error("获取失败");
      }
    },
    async getCarousel() {
      let res = await this.$get("/api/carousel/list");
      if (res && res.code === 200) {
        this.tableList = res.data.list;
        this.tableLoading = false;
      } else {
        this.$Message.error("获取失败");
      }
    },
  },
  mounted() {
    this.getCarousel();
  },
};
</script>
<style lang="less" scoped>
</style>